class Mask {
	constructor(newImg, newMask, newBigBox) {
		this.oImg = newImg;
		this.oMask = newMask;
		this.oBigBox = newBigBox;
	}

	onmouseover() {
		let that = this;
		// 显示mask和bigbox
		this.oImg.onmouseover = function() {
			that.oMask.style.display = "block";
			that.oBigBox.style.display = "block";
		}
	}

	onmouseout() {
		let that = this;
		// 显示mask和bigbox
		this.oImg.onmouseout = function() {
			that.oMask.style.display = "none";
			that.oBigBox.style.display = "none";
		}
	}

	onmousemove() {
		let that = this;
		this.oImg.onmousemove = function(evt) {
			let e = evt || event;

			let left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
			let top = e.pageY - this.offsetTop - that.oMask.offsetHeight / 2;

			if (left < 0) {
				left = 0;
			}

			let maxLeft = that.oImg.offsetWidth - that.oMask.offsetWidth;

			if (left > maxLeft) {
				left = maxLeft;
			}

			if (top < 0) {
				top = 0;
			}

			let maxTop = that.oImg.offsetHeight - that.oMask.offsetHeight;

			if (top > maxTop) {
				top = maxTop;
			}

			let x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
			let y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;

			that.oBigBox.style.backgroundPositionX = -x + "px";
			that.oBigBox.style.backgroundPositionY = -y + "px";

			that.oMask.style.left = left + "px";
			that.oMask.style.top = top + "px";
		}
	}
}